<template>
	<div class="component-static-resource-management">
		<div class="upload-block">
			<div class="upload-block-button">
				<el-select
					v-model="state.resourceType"
					size="small"
					style="width: 200px"
					popper-class="typeSelect"
					placeholder="请选择"
					@change="refreshResourceList">
					<el-option
						v-for="item in state.options"
						:key="item.value"
						:label="item.label"
						:value="item.value" />
				</el-select>
				<el-button type="primary" size="small" class="upload-btn" @click="raiseUploadEvent">
					<el-icon><UploadFilled /></el-icon>
					{{ '上传资源' }}
				</el-button>
				<input
					id="uploadIcon"
					ref="stfile"
					class="upload-icon"
					type="file"
					@change="uploadIconFile()" />
			</div>
			<!-- <div class="upload-item" v-if="fileData.fileName">
          <div class="name">
            <div class="text">{{ fileData.fileName }}</div>
            <div class="item-icon" v-if="handleAbled">
              <i class="el-icon-success"></i>
            </div>
          </div>
          <div class="progress">
            <div :class="percentage == 100 ? 'on' : ''">
              {{ percentage == 100 ? "已完成" : "上传中" }}
            </div>
            <el-progress :percentage="percentage"></el-progress>
          </div>
        </div> -->
		</div>
		<!-- </el-form-item> -->
		<div class="file-tree">
			<div class="header">
				<div class="label-span">名称</div>
				<div class="column-span">操作</div>
			</div>
			<el-tree
				ref="leftTree"
				size="small"
				class="tree"
				:highlight-current="false"
				:check-strictly="true"
				:data="treeDataList"
				:props="state.componentTreeProps"
				:show-icon="true"
				node-key="uuid">
				<!-- @node-click="handleNodeClick" -->
				<template #default="{ data }">
					<div class="custom-tree-node">
						<span class="label-span">{{ data.fileName }}</span>
						<span class="column-span">
							<el-icon @click="copyLink(data.fileUrl)">
								<DocumentCopy />
							</el-icon>
							<el-icon @click="itemDownload(data)"><Download /></el-icon>
						</span>
					</div>
				</template>
			</el-tree>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, toRefs, ref } from 'vue';
import * as CIF_API from '@CIF/API/api.js';
import { ElMessage } from 'element-plus';
// import { usePrimaryStore } from '@/store';
import useClipboard from 'vue-clipboard3';

const { toClipboard } = useClipboard();
// const store = usePrimaryStore();
const props = defineProps({
	instance: {
		type: Object,
		default() {
			return {};
		}
	}, // cpntTreeNode
	id: String,
	setConfiguredDataToInstance: Function
});

const state = reactive({
	activeCollapses: ['1', '2'],
	interactions: props.instance.interactions,
	callbackArgs: props.instance.callbackArgs,
	activeEventTab: '1',
	activeCallbackTab: '1',
	unwatch: null,

	percentage: 0,
	handleAbled: true,

	// fileData: {
	//   fileName: "",
	//   fileUrl: "",
	// },
	componentTreeProps: {
		label: 'fileName'
	},

	// resourceType 组件类型, 默认返回所有类型资源 枚举类型 FONTS：0：fonts、 IMG：1：img、 MEDIA：2:media,可用值:FONTS,IMG,MEDIA
	resourceType: 'img',

	options: [
		{
			value: 'img',
			label: '图片'
		},
		{
			value: 'media',
			label: '多媒体'
		},
		{
			value: 'fonts',
			label: '字体'
		}
	]
});

// 复制
const copyLink = async (url: any) => {
	await toClipboard(url);
	ElMessage({
		duration: 1500,
		message: '复制地址成功！',
		type: 'success'
	});
};
const treeDataList: any = ref([]);
function refreshResourceList(callback?: any) {
	const cpntDef = props.instance.definitionRefrence;
	CIF_API.getStaticResource(cpntDef.moduleName, cpntDef.version, state.resourceType).then((res) => {
		if (res.status) {
			treeDataList.value = [];
			res.data[state.resourceType].forEach((item: any) => {
				treeDataList.value.push({
					fileName: item.slice(item.lastIndexOf('/') + 1),
					fileUrl: item
				});
			});
		}
		callback && callback(res);
	});
}
refreshResourceList();
//上传图标文件
function uploadIconFile() {
	let file = stfile.value.files[0];

	const cpntDef = props.instance.definitionRefrence;
	CIF_API.uploadStaticResource(cpntDef.moduleName, cpntDef.version, state.resourceType, file).then(
		(res: any) => {
			if (res.status) {
				ElMessage.success('上传文件成功');
				state.percentage = 100;
				state.handleAbled = true;
				refreshResourceList();
			}
		}
	);
}

function itemDownload(row: any) {
	if (!row.fileName) {
		ElMessage.error('找不到文件');
		return false;
	}
	let file = {
		fileName: row.fileName,
		fileUrl: row.fileUrl
	};
	let filelink = document.createElement('a');
	filelink.download = file.fileName;
	filelink.href = file.fileUrl;

	// 将创建的标签插入dom
	document.body.appendChild(filelink);
	// 点击标签，执行下载
	filelink.click();
}

const stfile = ref();
function raiseUploadEvent() {
	stfile.value.click();
}

onMounted(() => {});
defineExpose({ ...toRefs(state) });
</script>

<style lang="scss">
.typeSelect {
	background-color: var(--dropdown-background) !important;
}
</style>
<style lang="scss" scoped>
.component-static-resource-management {
	position: relative;
	height: calc(100% - 72px);
	overflow-y: auto;
	&:hover::-webkit-scrollbar {
		background: #3d3f46; /* 滑块颜色 */
	}
	&::-webkit-scrollbar {
		/* 滚动条默认隐藏 */
		background-color: transparent;
		width: 6px; /* 滚动条宽度 */
	}
	&::-webkit-scrollbar-track {
		/* 滚动条轨道样式 */
		background: transparent;
	}

	&::-webkit-scrollbar-thumb {
		/* 滚动条滑块样式 */
		// background: #3d3f46; /* 滑块颜色 */
		border-radius: 3px; /* 滑块圆角 */
	}

	&::-webkit-scrollbar-thumb:hover {
		/* 鼠标悬停在滑块上时样式 */
		background: #55575e; /* 滑块悬停颜色 */
	}
	.el-tree {
		background-color: var(--background);
		overflow: hidden !important;
	}
	::v-deep .el-tree-node__content {
		border-bottom: 1px solid var(--primary-high);
		height: 30px;
		cursor: default;
	}

	::v-deep .el-tree-node__content:hover {
		background-color: unset !important;
	}

	::v-deep .is-current .el-tree-node__content {
		background-color: unset !important;
	}

	:deep(.el-select__wrapper) {
		background-color: var(--background);
	}

	.upload-block {
		padding: 10px;
		height: 48px;
		.upload-icon {
			display: none;
		}

		.upload-block-button {
			display: flex;
			justify-content: space-between;

			.upload_tip {
				height: 36px;
				line-height: 36px;
				font-size: 14px;
			}
		}

		.upload-item {
			display: flex;
			justify-content: space-between;

			.name {
				width: 30%;
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				text-align: center;
				line-height: 36px;

				.text {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.item-icon {
					color: gray;
					margin-right: 5px;

					i {
						color: var(--primary-high);
						padding: 5px;
					}
				}
			}

			.progress {
				width: 70%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;

				:deep(.el-progress-bar__outer) {
					height: 5px !important;
				}

				.el-progress {
					width: 80%;
				}

				.on {
					color: var(--primary);
				}
			}
		}
	}

	.file-tree {
		height: calc(100% - 50px);
		width: 100%;
		overflow: auto;

		.header {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			background: var(--primary-active);
			color: #fff;
			border-top: 1px solid var(--primary-high);
			border-bottom: 1px solid var(--primary-high);

			.label-span {
				text-align: left;
				text-indent: 2rem;
				width: calc(340px - 152px);
				height: 30px;
				line-height: 30px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.column-span {
				text-align: center;
				width: 110px;
				height: 30px;
				line-height: 30px;
				/* border-left: 1px solid var(--primary-high); */
			}
		}

		.tree {
			height: calc(100% - 75px);
			max-height: calc(100% - 75px);
			overflow: auto;
			/* border: 1px solid var(--primary-high); */

			.custom-tree-node {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 14px;
				padding-right: 8px;

				.label-span {
					width: 244px;
					height: 30px;
					line-height: 30px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.column-span {
					width: 100px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					/* border-left: 1px solid var(--primary-high); */
				}

				i {
					color: var(--primary);
					cursor: pointer;
					font-size: 1rem;
				}
				i:not(:first-child) {
					margin-left: 8px;
				}
			}
		}
	}
}
</style>
